body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color:#212139;
}

.container {
    display: flex;
    width: 95%;
    height: 95%;
}

.left-panel {
    width: 20%;
    padding: 20px;
    background-color: #9797b40d;
    border-right: 2px solid rgb(174, 162, 162);
    border-left: 1px solid rgb(159, 144, 144);
    box-shadow: 4px 0 5px rgba(240, 234, 234, 0.498);
}

.right-panel {
    width: 80%;
    padding: 20px;
    background-color: #34353e3d;
}

h3 {
    margin: 10px 0;
}

select, input[type="date"], button {
    margin-bottom: 10px;
    width: 100%;
}

button {
    background-color: #ae8e2d;
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#selected-results ul {
    list-style-type: none;
    padding: 0;
    border: 1px solid #756e6e97; 
}

#selected-results ul li {
    margin: 5px 0;
}

#chart {
    display: flex;                /* 使用 flex 布局 */
    flex-wrap: nowrap;            /* 禁止自动换行 */
    gap: 10px;                    /* 图表之间的间距 */
    height: 100%;                 /* 设为 100% */
    overflow-x: auto;             /* 启用横向滚动 */
    white-space: nowrap;          /* 防止内容自动换行 */
    padding-bottom: 10px;         /* 增加一些底部空间 */
}

.chart-container {
    display: inline-block;        /* 保证图表在一行显示 */
    min-width: 1220px;            /* 每个图表的最小宽度，可以根据需要调整 */
    height: 750px;                /* 每个图表的高度 */
    border: 2px solid #f0eeeb;    /* 为图表添加边框 */
    box-sizing: border-box;       /* 包含边框的宽高计算 */
    margin-right: 7px;           /* 图表之间的间隔 */
}

#selected-names {
    display: flex;            /* 使用 flex 布局 */
    flex-wrap: wrap;          /* 如果内容超出一行，则换行 */
    gap: 10px;                /* 控制名字之间的间距 */
    list-style: none;         /* 移除列表项的默认样式 */
    padding: 0;               /* 去除内边距 */
    margin: 0;                /* 去除外边距 */
}

#selected-names li {
    background-color: #dad5d5; /* 背景颜色 */
    padding: 5px 10px;         /* 内边距 */
    border-radius: 5px;        /* 圆角 */
    transition: background-color 0.3s; /* 鼠标移入移出时的过渡效果 */
}

#selected-names li:hover {
    background-color: #ddd; /* 鼠标悬停时改变背景色 */
}
select {
    width: 280px; /* 下拉框宽度 */
    height: 25px; /* 下拉框高度 */
    background-color: #ded3d3d2; /* 下拉框背景色 */
    border: 2px solid #252947; /* 边框颜色 */
    color: #333; /* 文本颜色 */
    padding: 4px; /* 内边距 */
    border-radius: 10px; /* 边角圆角 */
    font-size: 10px; /* 字体大小 */
}

/* 下拉选项的样式 */
select option {
    background-color: #e7dddd; /* 选项背景色 */
    color: #333; /* 选项文本颜色 */
}
/* 设置日期选择器的样式 */
input[type="date"] {
    width: 280px; /* 下拉框宽度 */
    height: 17px; /* 下拉框高度 */
    background-color: #bfc7c869; /* 背景色 */
    border: 1px solid #8db4b0; /* 边框颜色 */
    color: #dee6e5; /* 文本颜色 */
    padding: 5px; /* 内边距 */
    border-radius: 4px; /* 边角圆角 */
    font-size: 10px; /* 字体大小 */
}

/* 也可以针对输入框中的日期文本进行样式设置 */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: #00796b; /* 指示器背景色 */
    border-radius: 10px; /* 指示器圆角 */
}